<html>
<head>
	<script src="__STATIC__/chat/js/jquery.min.js"></script>
    <script src="__STATIC__/qqFace/js/jquery.qqFace.js"></script>
	<link rel="stylesheet" href="__STATIC__/chat/css/lists.css">
	<title>花生的消息列表</title>
</head>
<body>
	<div class="content">
		<div class="head">消息列表</div>
		<div class="lists">
			<div class="mes">
				<div class="head_img" style="background-image: url('__ROOT__/uploads/chat/chat_img_6120bea8654f3.jpg');background-size:100%;">
				</div>
				<div class="nickname"><span>花生</span></div>
				<div class="message"><span>你好啊，很高兴遇见你！</span></div>
				<div class="date">2021-08-23</div>
			</div>
		</div>
	</div>

	<script>

		var fromid = {$fromid};
		var API_URL = "http://chat.admin/index.php/api/chat/";

		// 动态监听 可以实时的显示消息
		ws = new WebSocket("ws://127.0.0.1:8282");
		ws.onmessage = function(e){
			var message = eval("("+e.data+")");

			switch(message.type){
				case 'init':
					var bild = '{"type":"bind","fromid":"'+fromid+'"}';
					ws.send(bild);
					list();
					return;
				case 'text':
					$('.lists').html('');
					list();     //清空消息列表 更新消息列表
					return;
				case 'say_img':
					$('.lists').html('');
					list();     //清空消息列表 更新消息列表
					return;
			}
		}

		function list(){
			$.post(
				API_URL+'get_list',
				{id:fromid},
				function(res){
					console.log(res);
					$.each(res,function(index,content){
						// 数量应该在头像上方，判断为0，去掉红点
						// 图片展示也是判断type=2 可以直接展示汉字：新图片
						$('.lists').append('<div onclick=redi("'+content.chat_page+'") class="mes"><div class="head_img" style="background-image: url('+content.head_url+');background-size:100%;"></div><div class="nickname"><span>'+content.username+'</span></div><div class="message"><span>'+replace_em(content.last_message.content)+'</span></div><div class="date">未读消息：'+content.countNoread+' 时间：'+getLocTime(content.last_message.time)+'</div></div>');
					})
				},'json'
			)
		}

		// 发送ajax请求 获取聊天记录
		// $(function(){
		// 	$.post(
		// 		API_URL+'get_list',
		// 		{id:fromid},
		// 		function(res){
		// 			console.log(res);
		// 			$.each(res,function(index,content){
		// 				// 数量应该在头像上方，判断为0，去掉红点
		// 				// 图片展示也是判断type=2 可以直接展示汉字：新图片
		// 				$('.lists').append('<div onclick=redi("'+content.chat_page+'") class="mes"><div class="head_img" style="background-image: url('+content.head_url+');background-size:100%;"></div><div class="nickname"><span>'+content.username+'</span></div><div class="message"><span>'+replace_em(content.last_message.content)+'</span></div><div class="date">未读消息：'+content.countNoread+' 时间：'+getLocTime(content.last_message.time)+'</div></div>');
		// 			})
		// 		},'json'
		// 	)
		// })


		function replace_em(str){

			str = str.replace(/\</g,'&lt;');

			str = str.replace(/\>/g,'&gt;');

			str = str.replace(/\n/g,'<br/>');

			str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/qqFace/arclist/$1.gif" border="0" />');

			return str;

		}
		// 时间戳转日期
		function getLocTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, " - ").replace(/日/g, " ");
		}

		// 页面跳转
		function redi(url){
			window.location.href=url;
		}

		
	</script>

</body>
</html>